<template>
  <div class="home">
    <div class="nav">
      <div class="nav-search" @click="goSearch">
        <span><i class="iconfont icon-search"></i></span>
        <span>搜索</span>
      </div>
      <div class="nav-title">咱的商城</div>
      <div class="nav-scanning">
        <span><i class="iconfont icon-saoyisao"></i></span>
        <span>扫一扫</span>
      </div>
    </div>
    <div class="home-wrapper" ref="homeWrapper">
      <div class="home-container">
        <div class="rotation">
          <mt-swipe :auto="4000">
            <mt-swipe-item v-for="item in banner" :key="item.id"><img class="rotation-img" :src="item.image" alt="">
            </mt-swipe-item>
          </mt-swipe>
        </div>
        <div class="tips">
          <div class="tips-item"><i class="iconfont icon-weight"></i><span>购物即享全返</span></div>
          <div class="tips-item"><i class="iconfont icon-weight"></i><span>七天无忧退换货</span></div>
          <div class="tips-item"><i class="iconfont icon-weight"></i><span>合伙人分享即获利</span></div>
        </div>
        <div class="card">
          <router-link to="/show" class="card-item">
            <img src="../../common/icon/sort.png" alt="">
            <p>商品分类</p>
          </router-link>
          <router-link to="/recharge" class="card-item">
            <img src="../../common/icon/chong.png" alt="">
            <p>充值中心</p>
          </router-link>
          <router-link to="/businessShop" class="card-item">
            <img src="../../common/icon/dian.png" alt="">
            <p>商家店铺</p>
          </router-link>
          <router-link to="/freeCollar" class="card-item">
            <img src="../../common/icon/ling.png" alt="">
            <p>0元领</p>
          </router-link>
        </div>
        <div class="activity-wrapper">
          <img src="http://api.fuxids.com/Uploads/Download/2017-07-31/597eecce4f9de.png" alt="">
        </div>
        <div class="shopping-area">
          <router-link to="/" class="area-item">
            <img src="../../common/icon/img_one.png" alt="">
          </router-link>
          <router-link to="/" class="area-item">
            <img src="../../common/icon/img_two.png" alt="">
          </router-link>
          <router-link to="/" class="area-item">
            <img src="../../common/icon/img_three.png" alt="">
          </router-link>
        </div>
        <div class="shopping-area">
          <router-link to="/" class="area-item">
            <img src="../../common/icon/img_four.png" alt="">
          </router-link>
          <router-link to="/" class="area-item">
            <img src="../../common/icon/img_five.png" alt="">
          </router-link>
          <router-link to="/" class="area-item">
            <img src="../../common/icon/img_six.png" alt="">
          </router-link>
        </div>
        <div class="homeShop-title"><span>推荐商品</span><i class="iconfont icon-xiangyou"></i></div>
        <div class="recommend-shop">
          <div class="recommend-wrapper" ref="recommendWrapper">
            <div class="recommend">
              <div class="recommend-item" @click="goDetail(item.product_id)" v-for="item in recommend" :key="item.product_id">
                <div class="recommend-img"><img :src="JSON.parse(item.image)" alt=""></div>
                <div class="recommend-description">{{item.product_name}}</div>
                <div class="recommend-price"><span class="current-price">￥{{item.price}}</span><span
                  class="original-price">￥{{item.price}}</span></div>
              </div>
            </div>
          </div>
        </div>
        <div class="homeShop-title"><span>精选商品</span><i class="iconfont icon-xiangyou"></i></div>
        <div class="featured-wrapper">
          <div class="featured-item" @click="goDetail(item.product_id)" v-for="item in featured" :key="item.product_id">
            <div class="featured-img"><img :src="JSON.parse(item.image)" alt=""></div>
            <div class="featured-info">
              <div class="featured-description"><span class="spanner-type">精选</span><span>{{item.product_name}}</span>
              </div>
              <div class="featured-price"><span>￥{{item.price}}</span><span>￥{{item.price}}</span></div>
              <div class="featured-tips"><span class="spanner-type">专享价</span><span
                class="onSale">{{item.count}}人已购</span></div>
            </div>
          </div>
        </div>
        <div class="homeShop-title"><span>猜你喜欢</span><i class="iconfont icon-like" style="color: red"></i></div>
        <div class="shop-public-wrapper">
          <div class="shop-item">
            <div class="shop-img"><img src="../../common/images/shop2.png" alt=""></div>
            <div class="shop-description">四川特产美食麻辣小吃 冷吃兔120g卤味</div>
            <div class="shop-price"><span>￥17.4</span><span>￥24.00</span></div>
          </div>
          <div class="shop-item">
            <div class="shop-img"><img src="../../common/images/shop2.png" alt=""></div>
            <div class="shop-description">四川特产美食麻辣小吃 冷吃兔120g卤味</div>
            <div class="shop-price"><span>￥17.4</span><span>￥24.00</span></div>
          </div>
          <div class="shop-item">
            <div class="shop-img"><img src="../../common/images/shop2.png" alt=""></div>
            <div class="shop-description">四川特产美食麻辣小吃 冷吃兔120g卤味</div>
            <div class="shop-price"><span>￥17.4</span><span>￥24.00</span></div>
          </div>
          <div class="shop-item">
            <div class="shop-img"><img src="../../common/images/shop2.png" alt=""></div>
            <div class="shop-description">四川特产美食麻辣小吃 冷吃兔120g卤味</div>
            <div class="shop-price"><span>￥17.4</span><span>￥24.00</span></div>
          </div>
          <div class="shop-item">
            <div class="shop-img"><img src="../../common/images/shop2.png" alt=""></div>
            <div class="shop-description">四川特产美食麻辣小吃 冷吃兔120g卤味</div>
            <div class="shop-price"><span>￥17.4</span><span>￥24.00</span></div>
          </div>
          <div class="shop-item">
            <div class="shop-img"><img src="../../common/images/shop2.png" alt=""></div>
            <div class="shop-description">四川特产美食麻辣小吃 冷吃兔120g卤味</div>
            <div class="shop-price"><span>￥17.4</span><span>￥24.00</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll';
  import {$} from '../../common/config';
  import axios from '../../axios/axios';

  export default {
    name: 'home',
    data() {
      return {
        city: '杭州',
        weizhi: false,
        banner: [],
        recommend: [],
        featured: []
      }
    },
    created(){

    },
    mounted: function () {
      let _this = this;
      var data = JSON.stringify({
        'actionName': 'index',
        'controllerName': 'productInfo',
        'data': [{}, 1, 10]
      });
      axios.post({
        data: data,
        callback(res) {
          console.log(res.data);
          if(res.data.data.result===true){
            _this.banner = res.data.data.banner;
            _this.featured = res.data.data.good;
            if(res.data.data.top.length>0){
              _this.recommend = res.data.data.top;
              _this.$nextTick(()=>{
                _this.ulWidth();
              })
            }
            _this.$nextTick(() => {
              _this._initScroll();
            });
            localStorage.setItem('group',JSON.stringify(res.data.data.group));
          }
        }
      });
    },
    methods: {
      goDetail:function (id) {
        this.$router.push({path:'/details',query:{id:id}});
      },
      goSearch:function () {
        this.$router.push('/search');
      },
      _initScroll: function () {
        this.homeScroll = new BScroll(this.$refs.homeWrapper, {
          click:true
        });
        this.recommendScroll = new BScroll(this.$refs.recommendWrapper, {
          scrollX: true,
          click:true,
          eventPassthrough: 'vertical'
        })
      },
      ulWidth() {
        let liList = document.querySelectorAll('.recommend-item');
        console.log('sssss');
        console.log(liList);
        let liWidth = liList[0].offsetWidth + 5;
        $('.recommend').style.width = liList.length * liWidth + 'px';
        console.log(liWidth);
      }
    },
    components: {

    }
  }
</script>
<style type="text/scss" lang="scss" scoped>
  @import "../../common/style/public";
  .nav {
    width: 100%;
    height: 44px;
    position: fixed;
    top: 0;
    display: flex;
    text-align: center;
    background: linear-gradient(to right, #f06a22, #f04022);
    z-index: 100;
    color: #FFFFFF;

    .nav-search,.nav-scanning {
      width: 15%;
      overflow: hidden;
      padding: 5px 0;
      box-sizing: border-box;
      /*line-height: 22px;*/
      span{
        display: block;
      }
      span:first-child{
        i{
          font-size: 18px;
        }
      }
      span:last-child{
        font-size: 10px;
      }
    }
    .nav-title {
      width: 70%;
      height: 44px;
      line-height: 44px;
    }

  }

  .home-wrapper {
    width: 100%;
    height: calc(100% - 89px);
    position: absolute;
    top: 40px;
    bottom: 49px;
    overflow: hidden;
    margin-bottom: 49px;

    .home-container {
      width: 100%;

      .rotation {
        height: 55vw;

        .rotation-img {
          display: block;
          width: 100%;
          height: 100%;
        }

      }
      .tips {
        width: 100%;
        height: 30px;
        line-height: 30px;
        display: flex;
        background-color: #FFFFFF;
        padding: 0 8px;
        box-sizing: border-box;
        .tips-item {
          flex: 1;
          text-align: center;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;

          i {
            font-size: 20px;
            color: #da8526;
          }

          span {
            vertical-align: top;
            font-size: 10px !important;
            color: #858585;
          }

        }
      }
      .card {
        width: 100%;
        margin-top: 8px;
        background-color: #FFFFFF;
        display: flex;

        .card-item {
          display: block;
          flex: 1;
          text-align: center;
          padding-top: 10px;
          padding-bottom: 20px;

          img {
            width: 35px;
            height: 35px;
          }

          p {
            font-size: 12px;
          }

        }
      }
      .activity-wrapper {
        width: 100%;
        padding: 10px;
        text-align: center;
        box-sizing: border-box;
        background-color: #FFFFFF;
        margin-top: 8px;

        img {
          width: 100%;
          height: 100%;
        }

      }
      .shopping-area {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        padding: 10px;
        /*margin-top: 8px;*/
        background-color: #FFFFFF;
        box-sizing: border-box;

        .area-item {
          flex: 1;

          img {
            width: 100%;
            height: 100%;
          }

        }
        .area-item:not(:nth-child(3)) {
          margin-right: 10px;
        }

      }
      .homeShop-title {
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        background-color: #ffffff;
        margin-top: 10px;
        border: solid 1px #f5f5f5;
        box-sizing: border-box;

        span {
          font-size: 14px;
          vertical-align: top;
          color: #6ab2e5;
        }

        i {
          font-size: 20px;
          color: #898989;
        }

      }
      .recommend-wrapper {
        width: 100vw;
        /*height: 200px;*/
        overflow: hidden;

        .recommend {
          width: auto;
          /*height: 200px;*/
          display: flex;
          flex-wrap: nowrap;

          .recommend-item {
            width: 140px;
            background-color: #ffffff;

            .recommend-img {
              width: 140px;
              height: 40vw;
              vertical-align: middle;

              img {
                width: 100%;
                height: 100%;
              }

            }
            .recommend-description {
              height: 25px;
              padding: 5px 5px 0 5px;
              font-size: 12px;
              color: #9c9c9c;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }

            .recommend-price {
              width: 100%;
              height: 25px;
              line-height: 25px;
              padding: 0 5px;

              .current-price {
                color: #9c1a14;
                font-size: 14px;
                padding-right: 5px;
                box-sizing: border-box;
              }

              .original-price {
                font-size: 13px;
                color: #9c9c9c;
                text-decoration: line-through;
              }

            }
          }
          .recommend-item:not(:last-child) {
            margin-right: 5px;
          }
        }
      }
      .featured-wrapper {
        width: 100%;
        height: auto;
        background-color: #ffffff;

        .featured-item {
          width: 100%;
          height: 40vw;
          padding: 10px;
          display: flex;
          border-bottom: solid 1px #f5f5f5;
          box-sizing: border-box;

          .featured-img {
            flex: 4;
            text-align: center;

            img {
              width: 100%;
              height: 100%;
            }

          }
          .featured-info {
            flex: 6;
            padding-left: 5px;
            padding-top: 5px;
            padding-bottom: 5px;
            box-sizing: border-box;

            .featured-description {
              width: 100%;
              height: 14vw;
              font-size: 12px;
              display: flex;

              .spanner-type {
                display: block;
                height: 18px;
                line-height: 18px;
                padding: 0 3px;
                background-color: pink;
                color: red;
                border-radius: 5px;
                box-sizing: border-box;
              }

              span:last-child {
                flex: 7;
                color: #9c9c9c;
                display: block;
                padding-left: 10px;
                overflow: hidden;
                box-sizing: border-box;
              }

            }
            .featured-price {
              width: 100%;
              height: 10vw;
              line-height: 40px;

              span:first-child {
                font-size: 14px;
                color: red;
              }

              span:last-child {
                font-size: 13px;
                color: #9c9c9c;
                padding-left: 10px;
                text-decoration: line-through;
              }

            }
            .featured-tips {
              width: 100%;
              /*height: 10vw;*/
              display: flex;
              font-size: 12px;
              padding-top: 5px;
              box-sizing: border-box;

              .spanner-type {
                display: block;
                height: 18px;
                line-height: 18px;
                padding: 0 3px;
                background-color: pink;
                color: red;
                border-radius: 5px;
                box-sizing: border-box;
              }

              .onSale {
                flex: 7;
                text-align: right;
                color: #9c9c9c;
              }

            }
          }
        }
      }
    }
  }

</style>







